<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../assets/css/palindrome.css">
<link rel="preconnect" href="https://fonts.gstatic.com/%22%3E">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com/%22%3E">
<link href="https://fonts.googleapis.com/css2?family=Freckle+Face&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com/%22%3E">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap" rel="stylesheet">
<title>Palindrome check</title>
</head>
<body>

    <h1>
    <span>P</span>
    <span>a</span>
    <span>l</span>
    <span>i</span>
    <span>n</span>
    <span>d</span>
    <span>r</span>
    <span>o</span>
    <span>m</span>
    <span>e</span>
    </h1>
    <h3>
    <span>c</span>
    <span>h</span>
    <span>e</span>
    <span>c</span>
    <span>k</span>
    </h3>

    <div id="def">
    <p>
        A palindrome is a word, number, phrase, or other sequence of characters which reads the same backward as forward, such as madam or racecar.
    </p>
    </div>
    <div id="div2">
    <b><h2 style="font-family: 'Poppins', sans-serif;">-Let's test a string if it is a palindrome or not- </h2></b>
    <form id="form" onsubmit="fun()">
        <input type="text" id="fld"><br>
        <input type="button" value="check" id="btn" onclick="fun()">
        <input type="button" value="Reset" id="btn" onclick="myFunction()">
        <p id="result"></p>
    </form>
    </div>
    <script src="../assets/js/palindrome.js"></script>
</body>
</html>
